<template>
  <div class="common-map">
    <div id="map-container"
      class="map-container"></div>

    <div class="clip-btn-groups"
      @mouseleave="isClipState = false"
      @mouseover="isClipState = true">
      <div v-show="isClipState"
        class="map-btns">
        <div class="map-btn">
          <div class="map-operation-btn cancal"
            @click="mapClear"><i />清除</div>
        </div>
        <div class="map-btn">
          <div class="map-operation-btn complete"
            @click="mapComplete"><i />完成</div>
        </div>
      </div>

      <div class="map-btn clip-spot-btn">
        <div><i />分组</div>
      </div>
    </div>
  </div>
</template>

<script>
  const wellknown = require('wellknown');

  const mapConfig = {
    // 基础底图
    baseLayerUrl: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_c&X={x}&Y={y}&L={z}&tk=ffa5ef8e4ea43caf693fa0097f8258a6',
    // 基础底图注记
    baseLabelLayer: 'http://t{s}.tianditu.gov.cn/DataServer?T=cia_c&X={x}&Y={y}&L={z}&tk=ffa5ef8e4ea43caf693fa0097f8258a6'
  };
  import { f_shape3 } from './test.js';
  export default {
    name: 'theMap',
    data() {
      return {
        map: null,
        spotGroup: null,
        subSpotGroup: null,
        subFeatures: {},
        feature: null,
        // 按钮显隐状态
        isClipState: false
        // 图斑分组
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        //初始化
        this.map = L.map('map-container', {
          crs: L.CRS.EPSG4326, //坐标系
          center: [35.639, 105.55],
          zoom: 4,
          // 隐藏右下角官方图标
          attributionControl: false,
          // 隐藏左上角zoom控制图标(+ - 按钮)
          zoomControl: false
          // doubleClickZoom: false
        });

        //引入图层
        L.tileLayer(mapConfig.baseLayerUrl, {
          subdomains: ['0', '1', '2', '3', '4'],
          zoomOffset: 1,
          // 超过17级进行放大，保证不会出现未找到服务的提示
          maxNativeZoom: 17,
          maxZoom: 20
        }).addTo(this.map);

        //引入注记
        L.tileLayer(mapConfig.baseLabelLayer, {
          subdomains: ['0', '1', '2', '3', '4'],
          zoomOffset: 1
        }).addTo(this.map);

        // 图斑形状
        this.spotGroup = new L.FeatureGroup();
        this.spotGroup.addTo(this.map);
        this.subSpotGroup = new L.FeatureGroup();
        this.subSpotGroup.addTo(this.map);
      },
      // 添加母图斑
      addSpot() {
        let wkt = f_shape3.split(';').pop();
        let geojson = wellknown.parse(wkt);
        this.feature = L.geoJSON(geojson, {
          style: { color: '#f00', weight: 1 }
          // 注：wkt只有一个feature，不像政区的josn数据是多个feature集合。
          // onEachFeature: (feature, layer) => {}
        });
        this.spotGroup.addLayer(this.feature);
        this.map.fitBounds(this.feature.getBounds());
        // 添加子图斑
        this.addSubSpot(geojson);
      },
      // 添加子图斑
      addSubSpot(geojson) {
        let { type, coordinates } = geojson;
        coordinates.forEach((coor) => {
          let newwkt = { type, coordinates: [coor] };
          let geojsonLayer = L.geoJSON(newwkt, {
            style: {
              graphicOpacity: 1,
              color: '#3388ff',
              strokeWidth: 3,
              strokeOpacity: 1,
              fillColor: '#ff0000', // 填充颜色
              fillOpacity: 0 // 填充颜色透明度
            },
            // 这里也只有一个feature
            onEachFeature: (feature, layer) => {
              layer.on({
                click: (evt) => {
                  evt.target.clicked = !evt.target.clicked;
                  let lay = evt.target;
                  let id = evt.target._leaflet_id;
                  if (lay.clicked) {
                    lay.setStyle({
                      stroke: false,
                      fillColor: '#ffff00',
                      fillOpacity: 1
                    });
                    this.subFeatures[id] = feature;
                  } else {
                    geojsonLayer.resetStyle(lay);
                    delete this.subFeatures[id];
                  }
                }
              });
            }
          });
          // 等同上面onEachFeature的用法
          // layer.on('click', (evt) => {
          //   evt.target.clicked = !evt.target.clicked;
          //   let lay = evt.target;
          //   if (lay.clicked) {
          //     lay.setStyle({
          //       stroke: false,
          //       fillColor: '#ffff00',
          //       fillOpacity: 1
          //     });
          //   } else {
          //     geojsonLayer.resetStyle(lay);
          //   }
          // });
          this.subSpotGroup.addLayer(geojsonLayer);
        });
      },
      toBounds(bounds) {
        if (bounds) {
          this.map.fitBounds(bounds);
        } else {
          this.map.flyTo([35.639, 105.55], 4);
        }
      },
      mapClear() {
        this.clearAll();
      },
      mapComplete() {
        console.log(5445, this.subFeatures);
      },
      // 清除所有
      clearAll() {
        this.spotGroup.clearLayers();
        this.subSpotGroup.clearLayers();
        this.subFeatures = {};
      }
      // 图斑分组
    }
  };
</script>

<style lang="scss" scoped>
  .common-map {
    width: 100%;
    height: 100%;
    .map-container {
      width: 100%;
      height: 100%;
    }
    // 按钮
    .clip-btn-groups {
      position: absolute;
      top: 100px;
      right: 20px;
      z-index: $--zindex-map-float-box;
    }
    .map-btn {
      display: inline-block;
      width: 60px;
      height: 60px;
      position: relative;
      color: #0072c5;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 4px;
      padding: 4px;
      box-sizing: border-box;
      cursor: pointer;
      text-align: center;
      margin-left: 6px;
      font-size: 14px;
    }
    .map-btn i {
      display: block;
      width: 32px;
      height: 32px;
      margin: 0 auto 4px auto;
    }
    .map-btns {
      display: inline-block;
    }
    .map-operation-btn:hover {
      background-color: rgba(0, 114, 197, 0.2);
    }

    .clip-spot-btn i {
      background: url('../images/split.png') no-repeat center;
    }
    .clip-line-btn i {
      background: url('../images/splitline.png') no-repeat center;
    }
    .clip-polygon-btn i {
      background: url('../images/splitpolygon.png') no-repeat center;
    }
    .clip-line-btn-active {
      color: #fff;
      background-color: #0072c5;
      i {
        background: url('../images/splitline_active.png') no-repeat center;
      }
    }
    .clip-polygon-btn-active {
      color: #fff;
      background-color: #0072c5;
      i {
        background: url('../images/splitpolygon_active.png') no-repeat center;
      }
    }
    .map-operation-btn.complete i {
      background: url('../images/complete.png') no-repeat center;
    }
    .map-operation-btn.cancal i {
      background: url('../images/clear.png') no-repeat center;
    }
  }
</style>
